<template>
<!-- 飙升榜 -->
<div class="soar-medal">
    <div class="container clearfix">
      <div class="soar-medal-left">
        <div class="soar-left-one">
          <h3>
            <a href="#" title="热门榜单">
              <span>热门榜单</span>
              <i class="iconfont">&#xe504;</i>
            </a>
          </h3>
          <ul style="position: static; height: 0px;">
          <li href="#" title="酷狗飙升榜" class="other">
            <img src="../../assets/img/crunchies/1.png" />
            <span>酷狗飙升榜</span>
          </li>
          <a href="" >
          <li href="#" title="酷狗TOP500" class="part" @click=switchHandler()>
            <img src="../../assets/img/crunchies/2.png" />
            <span>酷狗TOP500</span>
          </li>
          </a>
          <a href="">
          <li href="#" title="网络红歌榜" class="part">
            <img src="../../assets/img/crunchies/3.png" />
            <span>网络红歌榜</span>
          </li>
            </a>
          <li href="#" title="DJ热歌榜" class="part" @click=switchHandler()>
            <img src="../../assets/img/crunchies/4.jpg" />
            <span>DJ热歌榜</span>
          </li>
          <li href="#" title="酷狗雷达榜" class="part">
            <img src="../../assets/img/crunchies/5.jpg" />
            <span>酷狗雷达榜</span>
          </li>
          <li href="#" title="华语新歌榜" class="part">
            <img src="../../assets/img/crunchies/6.jpg" />
            <span>华语新歌榜</span>
          </li>
          <li href="#" title="欧美新歌榜" class="part">
            <img src="../../assets/img/crunchies/7.jpg" />
            <span>欧美新歌榜</span>
          </li>
          <li href="#" title="韩国新歌榜" class="part">
            <img src="../../assets/img/crunchies/8.jpg" />
            <span>韩国新歌榜</span>
          </li>
          <li href="#" title="日本新歌榜" class="part">
            <img src="../../assets/img/crunchies/9.jpg" />
            <span>日本新歌榜</span>
          </li>
          <li href="#" title="我们的歌榜" class="part">
            <img src="../../assets/img/crunchies/10.jpg" />
            <span>我们的歌榜</span>
            
          </li>
          <li href="#" title="音乐合伙人榜" class="part">
            <img src="../../assets/img/crunchies/11.jpg" />
            <span>音乐合伙人榜</span>
            
          </li>
          <li href="#" title="腾讯音乐人原创榜" class="part">
            <img src="../../assets/img/crunchies/12.jpg" />
            <span>腾讯音乐人原创榜</span>
          </li>
          <li href="#" title="粤语新歌榜" class="part">
            <img src="../../assets/img/crunchies/13.jpg" />
            <span>粤语新歌榜</span>
          </li>
          <li href="#" title="ACG新歌榜" class="part">
            <img src="../../assets/img/crunchies/14.jpg" />
            <span>ACG新歌榜</span>
          </li>
          <li href="#" title="酷狗分享榜" class="part">
            <img src="../../assets/img/crunchies/15.png" />
            <span>酷狗分享榜</span>
          </li>
          <li href="#" title="5sing音乐榜" class="part">
            <img src="../../assets/img/crunchies/16.png" />
            <span>5sing音乐榜</span>
          </li>
          <li href="#" title="繁星音乐榜" class="part">
            <img src="../../assets/img/crunchies/17.png" />
            <span>繁星音乐榜</span>
          </li>
        </ul>
        </div>
        <div class="soar-left-two">
          <h3>
            <a href="#" title="特色音乐榜">
              <span>特色音乐榜</span>
              <i class="iconfont">&#xe504;</i>
            </a>
          </h3>
          <li href="#" title="电音热歌榜" class="part">
            <img src="../../assets/img/crunchies/18.jpg" />
            <span>电音热歌榜</span>
          </li>
          <li href="#" title="影视金曲榜" class="part">
            <img src="../../assets/img/crunchies/19.jpg" />
            <span>影视金曲榜</span>
          </li>
          <li href="#" title="粤语金曲榜" class="part">
            <img src="../../assets/img/crunchies/13.jpg" />
            <span>粤语金曲榜</span>
          </li>
          <li href="#" title="欧美金曲榜" class="part">
            <img src="../../assets/img/crunchies/20.jpg" />
            <span>欧美金曲榜</span>
          </li>
          <li href="#" title="古风新歌榜" class="part">
            <img src="../../assets/img/crunchies/21.jpg" />
            <span>古风新歌榜</span>
          </li>
          <li href="#" title="小语种热歌榜" class="part">
            <img src="../../assets/img/crunchies/22.jpg" />
            <span>小语种热歌榜</span>
          </li>
        </div>
        <div class="soar-left-three">
          <h3>
            <a href="#" title="全球榜">
              <span>全球榜</span>
              <i class="iconfont">&#xe504;</i>
            </a>
          </h3>
          <li href="#" title="美国BillBoard榜" class="part">
            <img src="../../assets/img/crunchies/23.png" />
            <span>美国BillBoard榜</span>
          </li>
          <li href="#" title="英国单曲榜" class="part">
            <img src="../../assets/img/crunchies/24.png" />
            <span>英国单曲榜</span>
          </li>
          <li href="#" title="日本公信榜" class="part">
            <img src="../../assets/img/crunchies/25.png" />
            <span>日本公信榜</span>
          </li>
          <li href="#" title="韩国Melon榜" class="part">
            <img src="../../assets/img/crunchies/26.jpg" />
            <span>韩国Melon榜</span>
          </li>
          <li href="#" title="中国TOP排行榜" class="part">
            <img src="../../assets/img/crunchies/27.png" />
            <span>中国TOP排行榜</span>
          </li>
        </div>
      </div>
      <div class="soar-medal-right">
        <div class="soar-right-top">
          <h3>酷狗飙升榜</h3>
          <b class="rank_date">{{ NowDay }} 更新</b>
          <span>
            <i class="iconfont">&#xe62e;</i>
            播放全部
          </span>
        </div>
        <div class="soar-right-up">
          <p>
            <input type="checkbox" checked="true" />
            <span>全选</span>
          </p>
        
          <ul v-for="(item) in topList[0].data.tracks " >
            <li>
              <a href="#" title="小阿枫 - 久违" class="other">
            <input type="checkbox" checked="true" />
            <h3></h3>
            <i class="iconfont new">&#xe506;</i>
            <span>{{ item.name }} - {{ item.ar[0].name }}</span>
            <del>4:04</del>
            <i class="iconfont word">&#xe602;</i>
            <i class="iconfont word">&#xe651;</i>
            <i class="iconfont word">&#xe62e;</i>
          </a>
            </li>
          </ul>
          
        </div>
        <div class="soar-right-last">
          <span>查看更多内容，请下载客户端</span>
          <a href="#">立即下载</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
  export default {
    name: 'Rank'
  }
</script>

<script lang="ts" setup>
import { ref } from "vue"
import { getRankList } from '@/api/rank'
import { useListStore } from '@/stores/rank/index'
import { storeToRefs } from "pinia";
import dayjs  from "dayjs";


const ListStore = useListStore()


const NowDay = dayjs().year() + '-' + (dayjs().month() + 1) + '-' + dayjs().date()

interface arr {
  idx:number,
  data:[]
}
interface listdata {
  tracks?:[]
}
const topList = ref<arr[]>([
  {idx:0,data:[]},
  {idx:1,data:[]},
  {idx:2,data:[]},
  {idx:3,data:[]},
  {idx:4,data:[]},
  {idx:5,data:[]},
])

  topList.value.forEach( async(item)=>{
  console.log("item",item);
  
  const res = await getRankList(item.idx)
    // @ts-ignore
  item.data = res.playlist
  
  item.data.tracks.splice(21)
})

console.log("topList",topList.value);


const switchHandler = ( ) =>{
    console.log(123)
}








</script>

<style scoped>
/* 清除浮动 */
.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

/* 版心样式 */
.container {
  /* position: relative; */
  width: 1000px;
  margin: 0 auto;
}

/* 字体图标 */
@font-face {
  font-family: "iconfont";
  src: url('iconfont.eot?t=1575551538415');
  /* IE9 */
  src: url('iconfont.eot?t=1575551538415#iefix') format('embedded-opentype'),
    /* IE6-IE8 */
    url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
    url('iconfont.woff?t=1575551538415') format('woff'),
    url('iconfont.ttf?t=1575551538415') format('truetype'),
    /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
    url('iconfont.svg?t=1575551538415#iconfont') format('svg');
  /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-play:before {
  content: "\e62e";
}

.icon-iconziti48:before {
  content: "\e63b";
}

.icon-android:before {
  content: "\e60d";
}

.icon-ktv:before {
  content: "\e615";
}

.icon-xiazai:before {
  content: "\e651";
}

.icon-fenxiang:before {
  content: "\e602";
}

.icon-icon-gouxuan:before {
  content: "\e507";
}

.icon-right-copy:before {
  content: "\e502";
}

.icon-bofang:before {
  content: "\e6ac";
}

.icon-up:before {
  content: "\e503";
}

.icon-glass:before {
  content: "\e501";
}

.icon-ai64:before {
  content: "\e607";
}

.icon-huaban:before {
  content: "\e60a";
}

.icon-erji:before {
  content: "\e60e";
}

.icon-shangcheng:before {
  content: "\e640";
}

.icon-gui_xialajiantou-:before {
  content: "\e678";
}

.icon-shangjiantou:before {
  content: "\e504";
}

.icon-youjiantou:before {
  content: "\e505";
}

.icon-new:before {
  content: "\e506";
}

.icon-pc:before {
  content: "\e604";
}

.icon-yinle:before {
  content: "\e656";
}


/* 飙升榜开始 */
.soar-medal {
    height: 1662px;
}

.soar-medal-left {
    float: left;
    width: 241px;
    height: 1390px;
    border: 1px solid #eee;
    margin-top: 44px;
}

.soar-medal-left .soar-left-one {
    width: 100%;
    height: 790px;
    border-bottom: 1px solid #eee;
}

.soar-left-one h3 a {
    display: block;
    width: 241px;
    height: 57px;
    line-height: 57px;
}

.soar-left-one h3 a span {
    font-size: 16px;
    font-weight: 400;
    padding-left: 16px;
}

.soar-left-one h3 a i {
    float: right;
    color: #575757;
    font-size: 12px;
    padding-right: 22px;
}

.soar-left-one h3 a:hover i {
    color: #72b5fa;
}

.soar-left-one .other {
    display: inline-block;
    position: relative;
    width: 241px;
    height: 39px;
    color: #fff;
    font-size: 14px;
    line-height: 39px;
    background-color: #169af3;
}

.soar-left-one .other img:first-child {
    margin-left: 16px;
}

.soar-left-one .other img {
    vertical-align: middle;
}

.soar-left-one .other .small1 {
    position: absolute;
    top: 4px;
    left: 112px;
}

.soar-left-one .part .small2 {
    position: absolute;
    top: 4px;
    left: 120px;
}

.soar-left-one .part .small3 {
    position: absolute;
    top: 6px;
    left: 112px;
}

.soar-left-one .part .small4 {
    position: absolute;
    top: 4px;
    left: 124px;
}

.soar-left-one .part {
    display: inline-block;
    position: relative;
    width: 241px;
    height: 39px;
    font-size: 14px;
    line-height: 39px;
    margin-top: 4px;
}

.soar-left-one .part img:first-child {
    margin-left: 16px;
}

.soar-left-one .part img {
    vertical-align: middle;
}

.soar-left-one .part:hover {
    color: #288fe7;
    background-color: #f5f8fb;
}

.soar-medal-left .soar-left-two {
    height: 320px;
    border-bottom: 1px solid #eee;
}

.soar-left-two h3 a {
    display: block;
    width: 241px;
    height: 57px;
    line-height: 57px;
}

.soar-left-two h3 a span {
    font-size: 16px;
    font-weight: 400;
    padding-left: 16px;
}

.soar-left-two h3 a i {
    float: right;
    color: #575757;
    font-size: 12px;
    padding-right: 22px;
}

.soar-left-two h3 a:hover i {
    color: #72b5fa;
}

.soar-left-two .part {
    display: inline-block;
    position: relative;
    width: 241px;
    height: 39px;
    font-size: 14px;
    line-height: 39px;
    margin-top: 4px;
}

.soar-left-two .part img:first-child {
    margin-left: 16px;
}

.soar-left-two .part img {
    vertical-align: middle;
}

.soar-left-two .part:hover {
    color: #288fe7;
    background-color: #f5f8fb;
}

.soar-medal-left .soar-left-three {
    height: 278px;
}

.soar-left-three h3 a {
    display: block;
    width: 241px;
    height: 57px;
    line-height: 57px;
}

.soar-left-three h3 a span {
    font-size: 16px;
    font-weight: 400;
    padding-left: 16px;
}

.soar-left-three h3 a i {
    float: right;
    color: #575757;
    font-size: 12px;
    padding-right: 22px;
}

.soar-left-three h3 a:hover i {
    color: #72b5fa;
}

.soar-left-three .part {
    display: inline-block;
    position: relative;
    width: 241px;
    height: 39px;
    font-size: 14px;
    line-height: 39px;
    margin-top: 4px;
}

.soar-left-three .part img:first-child {
    margin-left: 16px;
}

.soar-left-three .part img {
    vertical-align: middle;
}

.soar-left-three .part:hover {
    color: #288fe7;
    background-color: #f5f8fb;
}

.soar-medal .soar-medal-right {
    float: left;
    width: 727px;
    height: 1461px;
    margin-left: 30px;
    margin-top: 54px;
}

.soar-right-top {
    height: 69px;
    border-bottom: 1px dashed #cacaca;
}

.soar-right-top h3 {
    float: left;
    font-size: 24px;
    font-weight: 400;
    margin-top: 8px;
}

.soar-right-top b {
    float: left;
    color: #999;
    font-size: 16px;
    font-weight: 400;
    margin-top: 16px;
    margin-left: 16px;
}

.soar-right-top span {
    float: right;
    width: 124px;
    height: 38px;
    color: #fff;
    font-size: 14px;
    line-height: 38px;
    text-align: center;
    background-color: #169af3;
    cursor: pointer;
    border-radius: 4px;
}

.soar-right-top span i {
    font-size: 18px;
}

.soar-right-top span:hover {
    background-color: #158fe1;
}

.soar-medal-right .soar-right-up {
    height: calc(1460px - 69px);
}

.soar-right-up p {
    margin-top: 31px;
}

.soar-right-up p input {
    width: 16px;
    height: 16px;
    margin: 0 8px;
}

.soar-right-up p span {
    color: #999;
    font-size: 14px;
    vertical-align: top;
}

.soar-right-up a {
    display: block;
    height: 59px;
    line-height: 59px;
    border-bottom: 1px solid #f2f2f2;
}

.soar-right-up a:nth-child(2) {
    margin-top: 6px;
}

.soar-right-up a input {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin: 0 8px;
}

.soar-right-up .other h3 {
    display: inline-block;
    color: #fe2c62;
    font-size: 18px;
    font-weight: 400;
    vertical-align: middle;
    margin: 0;
}

.soar-right-up a h3 {
    display: inline-block;
    color: #999;
    font-size: 16px;
    font-weight: 400;
    vertical-align: middle;
    margin-left: 1px;
}

.soar-right-up a .new {
    color: red;
    font-size: 18px;
    vertical-align: middle;
    margin-left: 12px;
    margin-right: 8px;
}

.soar-right-up a:nth-last-child(-n+13) .new {
    color: red;
    font-size: 18px;
    vertical-align: middle;
    margin-left: 6px;
    margin-right: 8px;
}

.soar-right-up a span {
    font-size: 14px;
    vertical-align: middle;
}

.soar-right-up .word {
    display: none;
    float: right;
    color: #999;
    font-size: 18px;
    margin-left: 7px;
}

.soar-right-up .word:hover {
    color: #68a9ec;
}

.soar-right-up .word:nth-last-child(3) {
    margin-right: 16px;
}

.soar-right-up del {
    float: right;
    color: #999;
    font-size: 16px;
    margin-right: 10px;
}

.soar-right-up a:hover {
    background-color: #f5f8fb;
}

.soar-right-up a:hover span,
.soar-right-up a:hover del {
    color: #009af3;
}

.soar-right-up a:hover .word {
    display: block;
}

.soar-medal-right .soar-right-last {
    width: 374px;
    height: 40px;
    color: #666666;
    line-height: 40px;
    font-size: 16px;
    margin-left: 176px;
}

.soar-right-last a {
    display: inline-block;
    width: 119px;
    height: 40px;
    color: #fff;
    text-align: center;
    background-color: #169af3;
    border-radius: 4px;
    margin-left: 24px;
}

.soar-right-last a:hover {
    background-color: #158fe1;
}

/* 飙升榜结束 */

/* 底部导航开始 */

/* reset */
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
dl,
dt,
dd,
ul,
ol,
li,
p,
blockquote,
pre,
hr,
figure,
table,
caption,
th,
td,
form,
fieldset,
legend,
input,
button,
textarea,
menu {
    margin: 0;
    padding: 0;
}

header,
footer,
section,
article,
aside,
nav,
hgroup,
address,
figure,
figcaption,
menu,
details {
    display: block;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption,
th {
    text-align: left;
    font-weight: normal;
}

html,
body,
fieldset,
img,
iframe,
abbr {
    border: 0;
}

i,
cite,
em,
var,
address,
dfn {
    font-style: normal;
}

[hidefocus],
summary {
    outline: 0;
}

li {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
small {
    font-size: 100%;
}

sup,
sub {
    font-size: 83%;
}

pre,
code,
kbd,
samp {
    font-family: inherit;
}

q:before,
q:after {
    content: none;
}

textarea {
    overflow: auto;
    resize: none;
}

label,
summary {
    cursor: default;
}

a,
button {
    cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6,
em,
strong,
b {
    font-weight: bold;
}

del,
ins,
u,
s,
a,
a:hover {
    text-decoration: none;
}

body,
textarea,
input,
button,
select,
keygen,
legend {
    font: 12px/1.14 arial, "Microsoft YaHei";
    color: #333;
    outline: 0;
}

body {
    background: #fff;
}

a,
a:hover {
    color: #333;
}

ul{
  display: block;
}


</style>